import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../AppConfig/Config.dart';
import '../AppConfig/CountryListData.dart';


class ChooseCountryList extends StatefulWidget {
  const ChooseCountryList({super.key});

  @override
  State<ChooseCountryList> createState() => _ChooseCountryListState();
}

class _ChooseCountryListState extends State<ChooseCountryList> {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          "选择国家区号",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w300,
            fontSize: 16.sp
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
      ),
      body: Row(
        children: [
          Expanded(
            child: ListView.separated(
              controller: _scrollController, // 添加控制器
              itemCount: MyCountryListData.CountryList.length,
              separatorBuilder: (BuildContext context, int index) {
                return Divider(
                  height: 1,
                  color: MyColors.backgreyColor,
                );
              },
              itemBuilder: (BuildContext context, int index) {
                final country = MyCountryListData.CountryList[index];
                return ListTile(
                  title: Text(
                    '${country['cnName']}  ${country['dialingCode']}',
                  ),
                  onTap: () {
                    Navigator.of(context).pop(country['dialingCode']);
                  },
                );
              },
            ),
          ),
          // 右侧首字母筛选
          // Container(
          //   height: 400.h,
          //   // color: Colors.grey[200],
          //   child: Column(
          //     children: List.generate(
          //       MyCountryListData.CountryList.length,
          //           (index) {
          //         final country = MyCountryListData.CountryList[index];
          //         // 获取国家名称的首字母
          //         final firstLetter =
          //         country['enName'][0].toUpperCase();
          //         // 如果是列表的第一个元素或者首字母与前一个不同，则显示一个标签
          //         if (index == 0 ||
          //             firstLetter !=
          //                 MyCountryListData.CountryList[index - 1]
          //                 ['enName'][0].toUpperCase()) {
          //           return InkWell(
          //             onTap: () {
          //               _scrollToIndex(firstLetter);
          //               // 滚动到相应的位置
          //               // 具体实现可以参考ListView的scrollTo方法
          //               // 这里只是一个简单示例，仅作为参考
          //             },
          //             child: Container(
          //               width: 20,
          //               height: 20,
          //               alignment: Alignment.center,
          //               child: Text(
          //                 firstLetter,
          //                 style: TextStyle(color: Colors.black),
          //               ),
          //             ),
          //           );
          //         } else {
          //           return Container();
          //         }
          //       },
          //     ),
          //   ),
          // ),
        ],
      ),
    );
  }

  void _scrollToIndex(String firstLetter) {
    // 查找第一个与首字母匹配的国家
    final index = MyCountryListData.CountryList.indexWhere((country) {
      final enName = country['enName'] as String;
      return enName.isNotEmpty && enName[0].toUpperCase() == firstLetter;
    });
    if (index != -1) {
      // 计算滚动偏移量
      final double itemExtent = 50.0; // 每个项目的高度
      final offset = index * itemExtent;
      // 滚动到相应的位置
      _scrollController.animateTo(
        offset,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }
}